<!--  -->
<template>
  <div class="thisPage experiment">
    <!-- 顶部导航 -->
    <div class="pageTitle" style="">威胁监测</div>
    <div class="topBanner"></div>
    <div class="content-wrapper">
      <div class="left-wrapper">
        <div class="left-item">
          <div class="top">
            <div  class="title">日志检测实验</div>
            <div class="num">1023</div>
          </div>
          <div class="bottom">
            <div class="bottom-item">
              <div class="title">活跃数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已完成数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已应用数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-item">
          <div class="top">
            <div class="title">日志智能化分析实验</div>
            <div class="num">1023</div>
          </div>
          <div class="bottom">
            <div class="bottom-item">
              <div class="title">活跃数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已完成数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已应用数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-item">
          <div class="top">
            <div class="title">文件检测实验</div>
            <div class="num">1023</div>
          </div>
          <div class="bottom">
            <div class="bottom-item">
              <div class="title">活跃数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已完成数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已应用数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-item">
          <div class="top">
            <div class="title">文件智能化实验</div>
            <div class="num">1023</div>
          </div>
          <div class="bottom">
            <div class="bottom-item">
              <div class="title">活跃数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已完成数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已应用数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-item">
          <div class="top">
            <div class="title">流量检测实验</div>
            <div class="num">1023</div>
          </div>
          <div class="bottom">
            <div class="bottom-item">
              <div class="title">活跃数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已完成数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已应用数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-item">
          <div class="top">
            <div class="title">流量智能化实验</div>
            <div class="num">1023</div>
          </div>
          <div class="bottom">
            <div class="bottom-item">
              <div class="title">活跃数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已完成数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
            <div class="bottom-item">
              <div class="title">已应用数量</div>
              <div class="content">
                <div class="num">882</div>较上周
                <div class="chang">+10</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-wrapper">
        <div class="top-wrapper">
          <div class="top-item">
            <div class="top">
              <div class="title">
                <div class="img">
                  <img src="../../../image/experience/biaoti.png" alt />
                </div>
                <div class="world">实验检测流量</div>
              </div>
              <div class="num">000bps</div>
            </div>
            <div class="one-model" ref="oneModel"></div>
            <div class="top">
              <div class="title">
                <div class="img">
                  <img src="../../../image/experience/biaoti.png" alt />
                </div>
                <div class="world">实验数据统计</div>
              </div>
            </div>
            <div class="num-item-wrapper">
              <div class="num-item">
                <div class="img-box">
                  <div class="img">
                    <img src="../../../image/experience/pic1.png" alt />
                  </div>
                </div>
                <div class="number">1203</div>
                <div class="text">告警总数</div>
              </div>
              <div class="num-item">
                <div class="img-box">
                  <div class="img">
                    <img src="../../../image/experience/pic2.png" alt />
                  </div>
                </div>
                <div class="number">1203</div>
                <div class="text">定向攻击告警</div>
              </div>
              <div class="num-item">
                <div class="img-box">
                  <div class="img">
                    <img src="../../../image/experience/pic3.png" alt />
                  </div>
                </div>
                <div class="number">1203</div>
                <div class="text">节点数</div>
              </div>
            </div>
            <div class="top">
              <div class="title">
                <div class="img">
                  <img src="../../../image/experience/biaoti.png" alt />
                </div>
                <div class="world">资源占比</div>
              </div>
            </div>
            <div class="two-model" ref="twoModel"></div>
          </div>
        </div>
        <div class="bottom-wrapper">
          <div class="top">
            <div class="title">
              <div class="img">
                <img src="../../../image/experience/biaoti.png" alt />
              </div>
              <div class="world">实验总量统计</div>
            </div>
            <datePicker @getTimeIndex="getTimeIndex"></datePicker>
          </div>
          <div class="model-three" ref="threeModel"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import datePicker from "./component/datePicker";
export default {
  components: { datePicker },
  data() {
    return {
      // 导航菜单
      topNavData: {
        data: { name: "实验", path: "" }, // path待修改
        threat: { name: "教学", path: "" },
        origin: { name: "业务", path: "" },
        perception: { name: "测评", path: "" }
      },
      isChecked: 0,// 当前页
      timeIndex: 1, // 当前统计周期
    };
  },

  computed: {},
  watch: {},
  methods: {
    // 改变当前tab页
    toTopPath(index) {
      this.isChecked = index;
    },
    // 改变当前统计周期
    getTimeIndex(index) {
      this.timeIndex = index;
    },
    // 实验检测流量
    getOneModel() {
      let dataList = [
        {
          name: "08:10",
          value: "0.15"
        },
        {
          name: "08:20",
          value: "0.18"
        },
        {
          name: "08:30",
          value: "0.14"
        },
        {
          name: "08:40",
          value: "0.18"
        },
        {
          name: "08:50",
          value: "0.17"
        },
        {
          name: "09:00",
          value: "0.12"
        },
        {
          name: "09:10",
          value: "0.15"
        },
        {
          name: "09:20",
          value: "0.14"
        }
      ];
      let line = this.$echarts.init(this.$refs.oneModel);
      let option = {
        backgroundColor: "#031942",
        tooltip: {
          trigger: "axis"
        },
        legend: {
          show: false,
          data: ["移动", "电信"],
          textStyle: {
            color: "#fff"
          }
        },
        title: {
          left: 26,
          top: 26,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 15,
            fontWeight: 50000,
            fontFamily: "PingFang SC"
          }
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "5%",
          top: "8%",
          containLabel: true
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: dataList.length > 15 ? 35 : 100
          }
        ],
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "#397cbc"
            }
          },
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          //轴线上的字
          axisLabel: {
            show: false,
            textStyle: {
              color: "#cecece",
              fontSize: "14"
            }
          },
          data: [
            "08:10",
            "08:20",
            "08:30",
            "08:40",
            "08:50",
            "09:00",
            "09:10",
            "09:20"
          ]
        },
        yAxis: {
          type: "value",
          splitNumber: 4,
          axisTick: {
            show: false
          },
          boundaryGap: false,
          //轴线上的字
          axisLabel: {
            show: false,
            textStyle: {
              fontSize: "12",
              color: "#cecece"
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#397cbc"
            }
          },
          //网格线
          splitLine: {
            show: false,
            lineStyle: {
              color: "#11366e"
            }
          }
        },

        series: [
          {
            name: "实验",
            type: "line",
            smooth: true, //是否平滑曲线显示
            showSymbol: false,
            markPoint: {
              data: [
                {
                  name: "周最高",
                  value: 320,
                  xAxis: 4,
                  yAxis: 320
                }
              ]
            },
            itemStyle: {
              color: "#3eb5dd",
              borderColor: "#f1f1f1",
              borderWidth: 1
            },
            lineStyle: {
              normal: {
                width: 4,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#57b3e5" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#31a9ea" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 30,
                shadowOffsetY: 5
              }
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(58,182,224, 0.6)"
                    },
                    // {
                    //   offset: 0.6,
                    //   color: "rgba(58,182,224, 0.2)"
                    // },
                    // {
                    //   offset: 0.8,
                    //   color: "rgba(58,182,224, 0.01)"
                    // },
                    {
                      offset: 1,
                      color: "rgba(58,182,224, 0.01)"
                    }
                  ],
                  false
                ),
                // shadowColor: "rgba(58,182,224, 0.1)",
                // shadowBlur: 6,
                alobal: false
              }
            },
            data: dataList
          }
        ]
      };
      line.setOption(option);
    },
    // 资源占比
    getTwoModel() {
      let line = this.$echarts.init(this.$refs.twoModel);
      let option = {
        title: {
          show: false,
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        label: {
          color: "#fff"
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "80%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              // { value: 310, name: "邮件营销" },
              // { value: 234, name: "联盟广告" },
              // { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" }
            ],
            color: ["#11BAF7", "#3152F7"]
            // itemStyle: {
            //   emphasis: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)"
            //   }
            // }
          }
        ]
      };
      line.setOption(option);
    },
    // 实验总量统计
    getThreeModel() {
      let line = this.$echarts.init(this.$refs.threeModel);
      let option = {
        title: {
          show: false,
          text: "折线图堆叠"
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(28,35,64,0.9)",
          textStyle: {
            color: "#11BAF7"
          }
        },
        legend: {
          show: false,
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
        },
        grid: {
          top: "20px",
          left: "3%",
          right: "4%",
          bottom: "40px",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#11BAF7"
            }
          },
          data: ["04-01", "04-02", "04-03", "04-04", "04-05", "04-06", "04-07"]
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#11366e"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#11BAF7"
            }
          }
        },
        series: [
          {
            name: "总数量",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
            color: "#3152F7"
          },
          {
            name: "活跃数量",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
            color: "#C73A77"
          },
          {
            name: "已完成数量",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
            color: "#8D3FF2"
          },
          {
            name: "已应用数量",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            color: "#11BAF7"
          }
        ]
      };
      line.setOption(option);
    }
  },
  created() {},
  mounted() {
    this.getOneModel();
    this.getTwoModel();
    this.getThreeModel();
  }
};
</script>
<style lang="less" scoped>
@import url(../../../style/style.less);
</style>
<style lang='less' scoped>
@fontColor: #11baf7;
@fontSize: 18px;
.thisPage {
  width:100%;
  height: 100%;
  background: #020409;
  color: @fontColor;
  font-size: @fontSize;
  overflow-y: auto;
  header {
    background: url(../../../image/experience/top.png) no-repeat;
    background-size: 100% 100%;
    .nav {
      .navBar {
        height: 40px;
        text-align: center;
        color: #fff;
        line-height: 35px;
        font-size: 20px;
        cursor: pointer;
      }
      .data,
      .threat {
        float: left;
        margin-left: 20px;
        background: url(../../../image/experience/left-tab.png) no-repeat;
        background-size: 100% 100%;
      }
      .dataChecked,
      .threatChecked {
        float: left;
        margin-left: 20px;
        background: url(../../../image/experience/left-tab-click.png) no-repeat;
        background-size: 100% 100%;
      }
      .data:hover,
      .threat:hover {
        background: url(../../../image/experience/left-tab-click.png) no-repeat;
      }
      .origin,
      .perception {
        float: right;
        margin-right: 20px;
        background: url(../../../image/experience/right-tab.png) no-repeat;
        background-size: 100% 100%;
      }
       .origin:hover,
      .perception:hover{
          background: url(../../../image/experience/right-tab-click.png) no-repeat;
      }
      .originChecked,
      .perceptionChecked {
        float: right;
        margin-right: 20px;
        background: url(../../../image/experience/right-tab-click.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .content-wrapper {
    width: 100%;
    height: 88%;
    display: flex;
    justify-content: space-between;
    background: url(../../../image/experience/wxbeijing.png) no-repeat;
    background-size: 100% 100%;
  }
  .left-wrapper {
    // width: 430px;
    width: 22.4%;
    margin: 0 24px;
    // margin-bottom: 0px;
    // height: calc(100vh - 158px);
    // overflow: auto;
    // overflow: hidden;
    .left-item {
      margin-bottom: 2%;
      width: 100%;
      height: 15%;
      padding: 14px 20px;
      background: url(../../../image/experience/zuo1.png) no-repeat;
      background-size: 100% 100%;
      .top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255,255,255,0.5);
        // opacity: 0.5;
        .title {
          font-size: 18px;
          color: #fff;
          font-weight: 700;
           opacity:1;
          line-height: 36px;
        }
        .num {
          font-size: 30px;
          font-weight: 700;
          color: #11baf7;
          line-height: 36px;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        .bottom-item {
          font-size: 14px;
          font-weight: 350;
          line-height: 26px;
          color: #0f96ca;
          .content {
            display: flex;
            .num {
              margin-right: 3px;
              font-size: 18px;
              font-weight: 700;
              line-height: 26px;
              color: #fff;
            }
            .chang {
              font-size: 14px;
              font-weight: 350px;
              color: #11f72a;
            }
          }
        }
      }
    }
    .left-item:last-child{
      margin-bottom: 0
    }
  }
  .right-wrapper {
    // width: 1396px;
    width: 72.7%;
    margin: 24px;
    margin-bottom: 0;
    // margin-bottom: 16px;
    .top-wrapper {
      width: 100%;
      height: 64%;
      display: flex;
      .top-item {
        padding: 20px;
        padding-bottom: 0;
        margin-left: auto;
        width: 426px;
        // height: 588px;
        // height: 554px;
        background: url(../../../image/experience/you1.png) no-repeat;
        background-size: 100% 100%;
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 250;
            color: #11bad7;
            line-height: 1;
          }
          .num {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            line-height: 1;
          }
          .img {
            margin-right: 5px;
          }
        }
        .one-model {
          width: 366px;
          height: 20%;
          border: 1px solid #3152f7;
          border-radius: 2px;
          // margin-top: 14px;
          margin-bottom: 1%;
        }
        .num-item-wrapper {
          display: flex;
          justify-content: space-between;
          // margin-top: 14px;
          margin-bottom:1%;
          .num-item {
            text-align: center;
            //  width: 58px;
            .number {
              font-size: 24px;
              font-weight: 700;
              line-height: 36px;
              color: #fff;
            }
            .text {
              font-weight: 350;
              font-size: 14px;
              color: #11baf7;
            }
          }
          .img-box {
            width: 58px;
            height: 58px;
            margin: 0 auto;
            margin-bottom: 6px;
            border: 1px solid #3152d7;
          }
        }
        .two-model {
          width: 366px;
          height: 130px;
          padding-top: 4px;
          // padding: 0px;
        }
      }
    }
    .bottom-wrapper {
      width: 100%;
      // height: 296px;
        height: 32%;
      margin-top: 20px;
      padding: 16px 20px;
      padding-bottom: 0;
      overflow: hidden;
      background: url(../../../image/experience/you2.png) no-repeat;
      background-size: 100% 100%;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 250;
          color: #11bad7;
          line-height: 1;
        }
        .num {
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          line-height: 1;
        }
        .img {
          margin-right: 8px;
        }
      }
      .model-three {
        width: 100%;
        // height: 276px;
        height: 226px;
        margin: 0 auto;
      }
    }
  }
}
</style>